<template>
  <ul class="list-group">
    <!-- 通过v-for来循环渲染任务列表，切记不要忘记绑定key值 -->
  <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
    <div class="custom-control custom-checkbox">
      <!-- 通过v-model双向绑定复选框的状态 -->
  <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.done">
  <label class="custom-control-label" :for="item.id" :class="item.done? 'delete' : '' "> {{item.task}}</label>
</div>
   
    <span class="badge badge-success badge-pill" v-if="item.done">完成</span>
 <span class="badge badge-warning badge-pill" v-else>未完成</span>

  </li>
</ul>
</template>

<script>
export default {
  name:'TodoList',
  data(){
    return{
    }},
    props:{
      // 列表数据
      list:{
        // 指定数据类型
        type:Array,
        // 默认值
        default:[],
        // 必选项
        required:true
      }
    }

}
</script>

<style lang='less' scoped>
.list-group {
  width: 400px;
}
// 为任务列表添加删除效果
.delete{
  // 中划线
  text-decoration: line-through;
  color:gray;
  // 字体倾斜
  font-style: italic;
  
}

</style>